<template>
  <div class="app-container">
    <div id="data">
      <el-row type="flex" justify="end" style="margin-top: 15px">
        <el-col :span="8">
          <el-button size="mini" type="primary" plain>近7日</el-button>
          <el-button size="mini">近30日</el-button>
          <el-date-picker
            v-model="value1"
            size="mini"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-col>
      </el-row>
      <strong>迭代版本 趋势图</strong>
      <div id="main" style="width: 100%; height: 380px" />

      <el-row type="flex" justify="end" style="margin-top: 15px">
        <el-col :span="8">
          <el-button size="mini" type="primary" plain>近7日</el-button>
          <el-button size="mini">近30日</el-button>
          <el-date-picker
            v-model="value1"
            size="mini"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-col>
      </el-row>
      <strong>Bug 趋势图</strong>
      <div id="main2" style="width: 100%; height: 380px" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {},
  mounted() {
    var myChart = this.echarts.init(document.getElementById("main"));
    var myChart2 = this.echarts.init(document.getElementById("main2"));
    //准备配置项
    let option = {
      //直角坐标系 grid 中的 x 轴
      xAxis: {
        type: "category", //坐标轴类型,可选
        data: ["一月", "二月", "三月", "四月", "五月"], //类目数据
      },
      //直角坐标系 grid 中的 y 轴
      yAxis: {
        type: "value", //坐标轴类型,可选
      },
      series: [
        {
          data: [120, 200, 150, 80, 70],
          type: "bar",
        },
      ],
    };

    // 将配置项设置给echarts实例对象
    myChart.setOption(option);
    myChart2.setOption(option);
  },
};
</script>

<style scoped>
#data {
  margin: 50px 20px;
}
</style>
